<template>
  <div>
    <c-title text="套餐"></c-title>
    <div class="sign-in-subscribe-set-meal">
      <ul class="box">
        <li class="goods" v-for="item in list" :key="item.id">
          <img class="img" :src="item.thumb">
          <div class="goods-info" :class="{'no_option':item.has_option==0}">
            <p>{{ item.title }}</p>
            <p v-if="item.has_option==1" class="specification">已选：
              {{item.current_options&&item.current_options.title||'--'}}
              {{item.current_options&&item.current_options.product_price||'--'}}
            </p>
            <div class="flex between align-center">
              <span  v-if="item.has_option==1" class="money">{{ $i18n.t('money') }}{{item.current_options&&item.current_options.product_price||''}}</span>
              <span  v-if="item.has_option==0" class="money">{{ $i18n.t('money') }}{{item.price}}</span>
              <button v-if="item.has_option==1" class="btn" @click="specification(item)">选规格</button>
            </div>

          </div>
        </li>
      </ul>

      <div class="footer flex between align-center" :class=" {pcStyle : this.fun.getPhoneEnv() == 3}">
        <div class="text-left">
          <div class="flex align-center">
            <span>数量：</span>
            <img @click="minus" class="operate" src="../../assets/images/goods_minus.png">
            <span class="count">{{ count }}</span>
            <img @click="plus" class="operate" src="../../assets/images/goods_plus.png">
          </div>
          <div>
            合计：<span class="total">{{ $i18n.t('money') }}{{ total }}</span>
          </div>
        </div>
        <div>
          <van-button class="pay" color="#F51D1D" round @click="pay">去结算</van-button>
        </div>
      </div>


      <van-overlay :show="show">
        <div class="wrapper">
          <div class="flex">
            <img class="specification-img" :src="thumb" />
            <p class="align-left">{{title}}</p>
          </div>
          <template v-if="has_many_specs && has_many_specs.length!==0">
            <div v-for="(item,i) in has_many_specs" :key="i">
              <p class="specification-color ">{{item.title}}：</p>
              <div class="flex align-center">
                <div v-for="(c_item, c_index) in item.has_many_specs_item" class="color"
                  :class="{ 'current': item.index == c_index }" :key="c_index" @click="choose(item, c_item,c_index,i)">{{
                  c_item.title }}</div>
              </div>
            </div>
          </template>
          <div class="line"></div>
          <p class="text-left main-color" v-if="has_many_specs && has_many_specs.length!==0">{{ $i18n.t('money')
          }}{{current_options.product_price}}</p>
          <van-icon @click="show = false" class="close" name="close" />
        </div>
      </van-overlay>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      has_many_specs: [],
      has_many_options: [],
      thumb: "",
      id: 0,
      goods: [],
      current_options:{},


      show: false,
      count: 1,
      list: [],
      give_active_value: '',
      shop_package_id: "",
      total:0,
    };
  },
  computed: {
    // total() {
    //   let no_options_goods_price = this.list.filter(item => item.has_option == 0).reduce((pre, cur) => pre + Number(cur.price), 0),
    //     options_goods_price = this.list.filter(item => item.has_option == 1).reduce((pre, cur) => pre + Number(cur.current_options.product_price), 0)

    //   return (no_options_goods_price + options_goods_price) * this.count;
    // }
  },
  activated() {
    this.goods=[];
    this.getData()
  },
  methods: {
    total_price() {
    let no_options_goods_price = this.list.filter(item => item.has_option == 0).reduce((pre, cur) => pre + Number(cur.price), 0),
      options_goods_price = this.list.filter(item => item.has_option == 1).reduce((pre, cur) => pre + Number(cur.current_options.product_price), 0)
    this.total = (no_options_goods_price + options_goods_price) * this.count;
  },
    async getData() {
      let { result, msg, data: { goods_list, give_active_value, shop_package_id } } = await $http.get("plugin.sign-buy.frontend.package.index.home");
      if (result == 0) return this.$toast(msg);
      this.list = goods_list;
      this.list.forEach(item => {
        item.has_many_specs.forEach(c_item => {
          c_item.index = 0;
        })
        if(item.has_option==1){
          item.current_options = item.has_many_options[0]
        }
        if (item.has_option == 1) {
          this.goods.push({ 'goods_id': item.id, 'total': 1, 'option_id': item.has_many_options[0].id })
        }
        if (item.has_option == 0) {
          this.goods.push({ 'goods_id': item.id, 'total': 1, 'option_id': 0 })
        }
      })

      this.give_active_value = give_active_value;
      this.shop_package_id = shop_package_id;
      this.total_price()
    },
    choose(has_many_specs_item, c_item, c_index, has_many_specs_item_index) {
      let current_specs = ''; //多规格id
      this.has_many_specs.forEach(item => {
        if (item.id == has_many_specs_item.id) {
          this.$set(this.has_many_specs, has_many_specs_item_index, { ...this.has_many_specs[has_many_specs_item_index], index: c_index });
        }
      })
      this.list.forEach((item,index) => {
        if (item.id == this.id) {
          item.has_many_specs[has_many_specs_item_index].index = c_index;
          item.has_many_specs.forEach((chi, chi_index) => {
            if (chi.id == has_many_specs_item.id) {
              let _arr = item.current_options.specs.split("_");
              _arr[chi_index] = c_item.id + '';
              current_specs = _arr.join("_");
            }
          })
          item.has_many_options.forEach((options_item,index) => {
          if (options_item.specs == current_specs) {

            item.current_options = options_item
            this.current_options = options_item
          }
        })
        }
      })
      this.goods.forEach(item=> {
        if(item.goods_id == this.id){
          item.option_id  =   this.current_options.id
        }
      })
      this.total_price()
    },
    minus() {
      if (this.count <= 1) {
       return;
      } else {
        this.count--;
        this.goods.forEach(item => item.total -= 1)
        this.total_price()
      }
    },
    specification(data) {
      this.thumb = data.thumb;
      this.title = data.title;
      this.has_many_specs = data.has_many_specs
      this.has_many_options = data.has_many_options
      this.id = data.id;
      this.current_options = data.current_options

      this.show = true;
    },
    pay() {
      let goodsId = []
      this.goods.forEach(item => {
        goodsId.push(item.goods_id)
      })
      this.$router.push(
        this.fun.getUrl("goodsorder", { goods: this.goods }, {
          tag: 'sign_buy',
          package_id: this.shop_package_id,
          goodsId: goodsId.join()
        })
      );
    },
    plus() {
      this.count += 1;
      this.goods.forEach(item => item.total += 1)
      this.total_price()
    }
  },

};
</script>

<style scoped lang="scss">
.pcStyle {
  width: 375px !important;
}

.sign-in-subscribe-set-meal {
  padding: 0.625rem;

  .no_option {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }

  .current {
    background-color: #fff1f1 !important;
    color: #ef3532 !important;
    border: 1px solid #ef3532 !important;
  }

  .color {
    width: 3rem;
    height: 1.56rem;
    line-height: 1.56rem;
    background: #ededed;
    border-radius: 0.125rem;
    color: #282727;
    font-size: 0.6875rem;
    margin-right: 0.9375rem;
    border: 1px solid #ededed;
  }

  .specification-color {
    text-align: left;
    margin-top: 1.375rem;
    margin-bottom: 0.75rem;
  }

  .align-left {
    text-align: left;
  }

  .main-color {
    color: #ef3532;
  }

  .close {
    font-size: 1.5313rem;
    position: absolute !important;
    color: #fff;
    bottom: -3.125rem;
  }

  .wrapper {
    position: relative;
    left: 50%;
    top: 10.1875rem;
    background-color: #fff;
    transform: translateX(-50%);
    width: 16.875rem;
    border-radius: 0.4688rem;
    padding: 1.0938rem 1.5313rem 1.1875rem 0.8125rem;
  }

  .line {
    height: 0.0625rem;
    background: #e7e7e7;
    margin: 1.6563rem 0 1.1563rem;
  }

  .specification-img {
    width: 2.8125rem;
    height: 2.8125rem;
    border-radius: 0.125rem;
    margin: 0 0.375rem 0 0;
  }

  .text-left {
    text-align: left;
  }

  .pay {
    width: 7.5rem;
    height: 2.3125rem;
  }

  .total {
    font-size: 1.0625rem;
    color: #f51d1d;
  }

  .box {
    padding-bottom: 4rem;
  }

  .count {
    margin: 0 0.9375rem;
  }

  .footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0.6875rem 0.9375rem 0.6563rem 0.9375rem;
  }

  .goods-info {
    margin-top: 0.9375rem;
    margin-left: 0.625rem;
    text-align: left;
    margin-bottom: 0.875rem;
    flex: 1;
  }

  .align-center {
    align-items: center;
  }

  .specification {
    color: #807e7e;
    font-size: 0.6875rem;
    margin-top: 0.75rem;
    margin-bottom: 0.7rem;
  }

  .flex {
    display: flex;
  }

  .operate {
    width: 1.125rem;
    height: 1.125rem;
  }

  .between {
    justify-content: space-between;
  }

  .btn {
    width: 3.125rem;
    height: 1.2813rem;
    font-size: 0.6875rem;
    border: none;
    background: #f51d1d;
    border-radius: 0.1875rem;
    color: #fff;
  }

  .goods {
    background: #fff;
    border-radius: 0.3125rem;
    display: flex;
    padding: 0 0.7813rem 0.78rem;
    margin-bottom: 0.625rem;
  }

  .img {
    width: 4.375rem;
    height: 4.375rem;
    margin: 0.9375rem 0 0 0;
    border-radius: 0.1875rem;
  }

  .money {
    color: #f51d1d;
    font-size: 0.875rem;
  }
}
</style>
